<template>
	<el-container class="workbench" v-if="navs.length > 0">

		<el-header class='workbench-header'>
			<div class="subject">
				<img class="logo" src="@/assets/image/common/logo.png" />
				<div class="title">小米商城管理系统</div>
			</div>
			<i :class="['icon-fold', collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="collapse = !collapse" :title="collapse ? '点击展开左侧菜单': '点击收起左侧菜单'"></i>
			<el-menu class="navs" :default-active="navIndex" mode="horizontal" active-text-color="#FF6700">
				<el-menu-item v-for="(item, index) in navs" :key="index" :index="index.toString()" @click="switchNav(index)">
					{{item.name}}
				</el-menu-item>
				<el-submenu index>
					<template slot="title">
						<el-avatar size="small" :src="loginUser.avatarUrl"></el-avatar>
						<span style="margin-left: 5px;">{{loginUser.name}} 【{{loginUser.role}}】</span>
					</template>
					<a href="https://zwmall.chengdongqing.top" target="_blank">
						<el-menu-item>
							返回前台
						</el-menu-item>
					</a>
					<el-menu-item @click="logout">退出登录</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-header>

		<el-container class="main-wrap">
			<el-aside class="side-menu" width="auto" v-if="menus.length > 0">
				<el-menu class="menu-wrap h-100" :default-active="menuIndex" :collapse="collapse" active-text-color="#FF6700">
					<el-menu-item v-for="(item, index) in menus" :key="index" :index="index.toString()" @click="switchPage(item.pagePath, index)">
						<i :class="item.iconClass || 'el-icon-s-flag'"></i>
						<span slot="title">{{item.name}}</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main class="main-content">
				<!-- 子页面路由器 -->
				<router-view></router-view>

				<!-- 回到顶部按钮 -->
				<el-backtop target=".main-content"></el-backtop>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				navs: [],
				navIndex: '0',
				menuIndex: '0',
				collapse: false
			}
		},
		computed: {
			...mapState(['loginUser']),
			menus() {
				return this.navs.length > 0 ? this.navs[this.navIndex].menus : [];
			}
		},
		watch: {
			navIndex(e) {
				sessionStorage.setItem('navIndex', e);
			},
			menuIndex(e) {
				sessionStorage.setItem('menuIndex', e);
			}
		},
		created() {
			const navs = this.$route.params.navs;
			if (navs) {
				this.navs = navs;
				this.$router.push(navs[0].menus[0].pagePath);
			} else {
				this.findMenus();
			}
		},
		methods: {
			findMenus() {
				this.loading = this.$loading({
					text: '加载中...'
				});
				this.$util.request('/menu', {}, (res) => {
					if (res.length == 0) {
						this.loading.close();

						this.$message.warning('您的可用菜单为空，请联系管理员');
						this.$router.replace('/login');
					} else {
						this.navs = res;
						this.initIndex();
					}
				}, true);
			},
			initIndex() {
				const navIndex = sessionStorage.getItem('navIndex');
				if (navIndex) this.navIndex = navIndex;
				const menuIndex = sessionStorage.getItem('menuIndex');
				if (menuIndex) this.menuIndex = menuIndex;

				if (this.$route.path == '/' && this.menus.length > 0) {
					this.$router.push(this.menus[0].pagePath);
				}
				this.loading.close();
			},
			switchNav(index) {
				this.navIndex = index.toString();
				this.menuIndex = '0';
				if (this.menus.length > 0 && this.$route.path != this.menus[0].pagePath) {
					this.$router.push(this.menus[0].pagePath);
				}
			},
			switchPage(path, index) {
				if (path != this.$route.path) {
					this.$router.push(path);
					this.menuIndex = index.toString();
				}
			},
			logout() {
				this.$confirm('确定退出登录吗？').then(_ => {
					const loading = this.$loading({
						text: '处理中...'
					});
					this.$util.request('/logout', {}, () => {
						loading.close();

						this.$store.commit('logout');
						this.$router.replace('/login');
					}, false, this.$util.baseUrl.replace('/admin', ''));
				}).catch(_ => {});
			}
		},
		provide() {
			return {
				logout: this.logout
			}
		}
	}
</script>

<style lang="scss">
	.workbench {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: $bg-color-grey;

		%bg {
			background-color: #fff;
		}

		.workbench-header {
			position: relative;
			display: flex;
			@extend %bg;
			margin-bottom: 5px;

			.subject {
				z-index: 1;
				@extend %flex-align-center;

				.logo {
					width: 40px;
					height: 40px;
				}

				.title {
					font-size: 20px;
					margin-left: 10px;
				}
			}

			.icon-fold {
				position: absolute;
				top: 20px;
				left: 260px;
				font-size: 22px;
				z-index: 1;
				cursor: pointer;
			}

			.navs {
				margin-left: auto;
				border-bottom: none;
			}
		}

		.main-wrap {
			overflow-y: auto;

			.side-menu {
				@extend %bg;

				.el-menu {
					border-right: none;
				}

				.menu-wrap:not(.el-menu--collapse) {
					width: 200px;
				}
			}
		}
	}
</style>
